<template>
  <div class="ranking-page">
    <!-- 排行榜头部 -->
    <div class="ranking-header">
      <h1 class="page-title">小说排行榜</h1>
      <p class="page-subtitle">发现最受欢迎的热门小说</p>
    </div>

    <!-- 排行榜标签 -->
    <div class="ranking-tabs">
      <div 
        v-for="tab in rankingTabs" 
        :key="tab.key"
        class="ranking-tab"
        :class="{ active: currentTab === tab.key }"
        @click="currentTab = tab.key"
      >
        <el-icon><component :is="tab.icon" /></el-icon>
        <span>{{ tab.label }}</span>
      </div>
    </div>

    <!-- 排行榜内容 -->
    <div class="ranking-content">
      <div class="ranking-list">
        <div 
          v-for="(novel, index) in currentRankingList" 
          :key="novel.id"
          class="ranking-item"
          @click="handleNovelClick(novel.id)"
        >
          <!-- 排名 -->
          <div class="rank-number" :class="getRankClass(index)">
            {{ index + 1 }}
          </div>

          <!-- 小说封面 -->
          <div class="novel-cover">
            <img :src="novel.cover" :alt="novel.title" />
            <div v-if="novel.isVip" class="vip-badge">VIP</div>
          </div>

          <!-- 小说信息 -->
          <div class="novel-info">
            <h3 class="novel-title">{{ novel.title }}</h3>
            <p class="novel-author">{{ novel.author }}</p>
            <p class="novel-category">{{ novel.category }}</p>
            <div class="novel-stats">
              <span class="stat-item">
                <el-icon><Reading /></el-icon>
                {{ formatNumber(novel.readCount) }}
              </span>
              <span class="stat-item">
                <el-icon><Star /></el-icon>
                {{ novel.rating }}
              </span>
              <span class="stat-item">
                <el-icon><Collection /></el-icon>
                {{ formatNumber(novel.collectCount) }}
              </span>
            </div>
          </div>

          <!-- 热度指标 -->
          <div class="ranking-indicator">
            <div class="indicator-label">{{ getCurrentIndicatorLabel() }}</div>
            <div class="indicator-value">{{ formatRankingValue(novel, currentTab) }}</div>
            <div class="trend-arrow" :class="novel.trend">
              <el-icon v-if="novel.trend === 'up'"><CaretTop /></el-icon>
              <el-icon v-else-if="novel.trend === 'down'"><CaretBottom /></el-icon>
              <el-icon v-else><Minus /></el-icon>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载更多 -->
      <div v-if="hasMore" class="load-more">
        <el-button @click="loadMore" :loading="loading" type="primary" plain>
          加载更多
        </el-button>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="currentRankingList.length === 0 && !loading" class="empty-state">
      <el-icon><DocumentDelete /></el-icon>
      <p>暂无排行榜数据</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  Star,
  Reading,
  Collection,
  Timer,
  TrendCharts,
  CaretTop,
  CaretBottom,
  Minus,
  DocumentDelete
} from '@element-plus/icons-vue'

// 路由
const router = useRouter()

// 响应式数据
const currentTab = ref('hot')
const loading = ref(false)
const hasMore = ref(true)

// 排行榜标签配置
const rankingTabs = [
  { key: 'hot', label: '热门榜', icon: Star },
  { key: 'new', label: '新书榜', icon: Timer },
  { key: 'collection', label: '收藏榜', icon: Collection },
  { key: 'reading', label: '阅读榜', icon: Reading },
  { key: 'complete', label: '完结榜', icon: TrendCharts }
]

// 模拟数据
const rankingData = ref({
  hot: [
    {
      id: 1,
      title: '斗罗大陆',
      author: '唐家三少',
      category: '玄幻',
      cover: 'https://via.placeholder.com/120x160/4CAF50/white?text=斗罗大陆',
      readCount: 5200000,
      rating: 9.2,
      collectCount: 450000,
      hotValue: 98750,
      trend: 'up',
      isVip: true
    },
    {
      id: 2,
      title: '完美世界',
      author: '辰东',
      category: '玄幻',
      cover: 'https://via.placeholder.com/120x160/2196F3/white?text=完美世界',
      readCount: 4800000,
      rating: 9.1,
      collectCount: 420000,
      hotValue: 96420,
      trend: 'up',
      isVip: false
    },
    {
      id: 3,
      title: '遮天',
      author: '辰东',
      category: '玄幻',
      cover: 'https://via.placeholder.com/120x160/FF9800/white?text=遮天',
      readCount: 4500000,
      rating: 9.3,
      collectCount: 380000,
      hotValue: 94280,
      trend: 'stable',
      isVip: true
    },
    {
      id: 4,
      title: '斗破苍穹',
      author: '天蚕土豆',
      category: '玄幻',
      cover: 'https://via.placeholder.com/120x160/9C27B0/white?text=斗破苍穹',
      readCount: 4200000,
      rating: 8.9,
      collectCount: 360000,
      hotValue: 91340,
      trend: 'down',
      isVip: false
    },
    {
      id: 5,
      title: '武动乾坤',
      author: '天蚕土豆',
      category: '玄幻',
      cover: 'https://via.placeholder.com/120x160/F44336/white?text=武动乾坤',
      readCount: 3900000,
      rating: 8.8,
      collectCount: 340000,
      hotValue: 89120,
      trend: 'up',
      isVip: true
    }
  ],
  new: [
    // 新书榜数据...
  ],
  collection: [
    // 收藏榜数据...
  ],
  reading: [
    // 阅读榜数据...
  ],
  complete: [
    // 完结榜数据...
  ]
})

// 计算属性
const currentRankingList = computed(() => {
  return rankingData.value[currentTab.value] || []
})

// 方法
const getRankClass = (index: number) => {
  if (index === 0) return 'rank-first'
  if (index === 1) return 'rank-second'
  if (index === 2) return 'rank-third'
  return ''
}

const getCurrentIndicatorLabel = () => {
  const labels = {
    hot: '热度值',
    new: '新书指数',
    collection: '收藏数',
    reading: '阅读数',
    complete: '完结指数'
  }
  return labels[currentTab.value] || '指数'
}

const formatRankingValue = (novel: any, tab: string) => {
  switch (tab) {
    case 'hot':
      return formatNumber(novel.hotValue)
    case 'collection':
      return formatNumber(novel.collectCount)
    case 'reading':
      return formatNumber(novel.readCount)
    default:
      return formatNumber(novel.hotValue)
  }
}

const formatNumber = (num: number) => {
  if (num >= 10000) {
    return `${(num / 10000).toFixed(1)}万`
  }
  return num.toString()
}

const handleNovelClick = (novelId: number) => {
  router.push(`/novel/${novelId}`)
}

const loadMore = () => {
  loading.value = true
  // 模拟加载更多数据
  setTimeout(() => {
    loading.value = false
    hasMore.value = false
  }, 1000)
}

onMounted(() => {
  // 初始化数据
})
</script>

<style lang="scss" scoped>
.ranking-page {
  min-height: 100vh;
  background: var(--bg-primary);
  padding: 20px;
}

.ranking-header {
  text-align: center;
  margin-bottom: 24px;

  .page-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
  }

  .page-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
  }
}

.ranking-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 8px;

  &::-webkit-scrollbar {
    height: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
  }
}

.ranking-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;

  &:hover {
    background: var(--primary-color-light);
    color: var(--primary-color);
  }

  &.active {
    background: var(--primary-color);
    color: white;
  }

  .el-icon {
    font-size: 16px;
  }
}

.ranking-content {
  max-width: 800px;
  margin: 0 auto;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
}

.rank-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 50%;
  background: var(--text-tertiary);
  color: white;
  font-size: 14px;

  &.rank-first {
    background: linear-gradient(135deg, #FFD700, #FFA500);
  }

  &.rank-second {
    background: linear-gradient(135deg, #C0C0C0, #808080);
  }

  &.rank-third {
    background: linear-gradient(135deg, #CD7F32, #8B4513);
  }
}

.novel-cover {
  position: relative;
  width: 60px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .vip-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 600;
  }
}

.novel-info {
  flex: 1;
  min-width: 0;

  .novel-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .novel-author {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 4px 0;
  }

  .novel-category {
    font-size: 12px;
    color: var(--primary-color);
    margin: 0 0 8px 0;
  }

  .novel-stats {
    display: flex;
    gap: 12px;
  }

  .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-tertiary);

    .el-icon {
      font-size: 12px;
    }
  }
}

.ranking-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 60px;

  .indicator-label {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-bottom: 2px;
  }

  .indicator-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 4px;
  }

  .trend-arrow {
    &.up {
      color: var(--success-color);
    }

    &.down {
      color: var(--danger-color);
    }

    &.stable {
      color: var(--text-tertiary);
    }

    .el-icon {
      font-size: 12px;
    }
  }
}

.load-more {
  text-align: center;
  margin-top: 24px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);

  .el-icon {
    font-size: 48px;
    margin-bottom: 16px;
  }

  p {
    font-size: 14px;
    margin: 0;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .ranking-page {
    padding: 16px;
  }

  .ranking-item {
    padding: 12px;
  }

  .novel-cover {
    width: 50px;
    height: 66px;
  }

  .novel-info {
    .novel-stats {
      flex-direction: column;
      gap: 4px;
    }
  }

  .ranking-indicator {
    min-width: 50px;
  }
}
</style> 